<template>
    <div class="login-layout">
        <div id="login" class="login">

            <div class="form-layout">
                <p class="info">影子环卫行业数据管理系统实时&nbsp;&nbsp;&nbsp;预警&nbsp;&nbsp;&nbsp;分析全面提升管理效率有效控制运营成本</p>
                <el-form
                        class="login-form"
                        :model="loginForm"
                        :label-position="'left'"
                        :rules="loginRules"
                        label-width="80px"
                        @keyup.enter.native="login()">

                    <div class="login-item">
                        <el-input :class="{searchfocus: nameInputState}" @focus="focus('nameInputState')" @blur="blur('nameInputState')" v-model="loginForm.username" placeholder="Username" :disabled="processing">
                            <template slot="prepend"><i class="fa fa-user"></i></template>
                        </el-input>
                    </div>
                    <div class="login-item">
                        <el-input :class="{searchfocus: pswInputState}" @focus="focus('pswInputState')" @blur="blur('pswInputState')" type="password" v-model="loginForm.password" placeholder="Password" :disabled="processing">
                            <template slot="prepend"><i class="fa fa-lock"></i></template>
                        </el-input>
                    </div>
                    <div class="login-item">
                        <span class="ml15 cursor-pointer" @click="forget()">忘记密码</span>
                    </div>
                    <div class="login-item">
                        <el-button class="btn-defalut" @click="login()" :loading="processing" :disabled="disabled">登录</el-button>
                    </div>
                    <!-- <p class="login-item text">or</p>
                    <div>
                      <el-button class="btn-null" @click="login()" :loading="processing" :disabled="disabled">创建有个新账号</el-button>
                    </div> -->
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    import constant from '@/constant'
    import { mapState } from 'vuex'

    const {REJECT, RESULT} = constant

    export default {
        name: 'login',
        data () {
            return {
                processing: false,
                nameInputState: 0,
                pswInputState: 0,
                loginForm: {
                    username: '',
                    password: ''
                },
                loginRules: {
                    username: [
                        {required: true, message: '请输入账号'}
                    ],
                    password: [
                        {required: true, message: '请输入密码'}
                    ]
                }
            }
        },
        computed: {
            disabled () {
                return !this.loginForm.username || !this.loginForm.password
            },
            ...mapState(['user'])
        },
        watch: {
            'user.info.async_state': function (state) {
                if (state === RESULT) {
                    if (this.$store.state.user.info.role === 'merchant') {
                        this.$router.push({name: 'setting_password'})
                    } else {
                        let redirect = this.$route.query.redirect
                        if (redirect) {
                            this.$router.replace({path: redirect})
                        } else {
                            this.$router.push({name: 'home'})
                        }
                    }
                } else if (state === REJECT) {
                    this.processing = false
                }
            }
        },
        methods: {
            login () {
                if (this.loginForm.username && this.loginForm.password) {
                    this.processing = true
                    this.$store.dispatch('login', this.loginForm)
                }
            },
            focus (attr) {
                this[attr] = 1
            },
            blur (attr) {
                this[attr] = 0
            },

            forget () {
                this.$alert('请联系管理员进行密码修改', '提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    callback: function (action, instance) {
                        // TODO : nothing...
                    }
                })
            }
        }
    }
</script>
